<template>
  <div>
    <!-- 分配权限的弹层 -->
    <el-dialog
      title="分配权限(一级为路由页面查看权限-二级为按钮操作权限)"
      :visible="showAssignDialog"
      @close="closeAssignDialog"
      @open="openFn"
    >
      <!-- 权限点数据展示 -->
      <el-tree
        ref="tree"
        node-key="id"
        :data="permissionData"
        :props="{ label: 'name' }"
        :default-expand-all="true"
        :show-checkbox="true"
        :check-strictly="true"
      />
      <template #footer>
        <div style="text-align: right">
          <el-button @click="closeAssignDialog">取消</el-button>
          <el-button type="primary" @click="comfirm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// 引入接口获取权限列表
import {
  getPermissionList,
  assignPerm,
  getRoleDetailById
} from '@/api/permission'

// 转树形结构方法
import transToTreeData from '@/utils/transTree'

export default {
  props: {
    curId: {
      type: Object,
      default() {
        return {}
      }
    },
    showAssignDialog: {
      type: Boolean,
      default: null
    }
  },
  data() {
    return {
      permissionData: [] // 存储权限数据
    }
  },
  methods: {
    // 关闭弹出层触发的事件
    closeAssignDialog() {
      this.$emit('update:showAssignDialog', false)
    },
    // 弹出层打开触发的事件
    openFn() {
      // 调用方法获取权限列表
      this.hGetPermissionList()

      // 调用方法获取回显数据
      this.hGetRoleDetailById()
    },
    // 点击确定触发的事件
    async comfirm() {
      // 调用接口分配权限
      await assignPerm({
        id: this.curId.id,
        permIds: this.$refs.tree.getCheckedKeys()
      })

      // 给出提示
      this.$message.success('分配权限点成功')

      // 关闭弹出层
      this.closeAssignDialog()
    },
    // 获取权限列表方法
    async hGetPermissionList() {
      // 发送请求, 获取权限列表
      const data = await getPermissionList()

      // 获取的数据转树形结构
      this.permissionData = transToTreeData(data)
    },
    // 回显数据封装的方法
    async hGetRoleDetailById() {
      // 掉接口获取数据
      const res = await getRoleDetailById(this.curId)

      // 将数据赋值给回显的
      this.$refs.tree.setCheckedKeys(res.permIds)
    }
  }
}
</script>
